<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工表格练习</title>
</head>
<body>
    <input type="text" placeholder="请输入员工姓名" id="eName">
    <input type="number" placeholder="请输入员工工资" id="eSalary">
    <input type="text" placeholder="请输入员工岗位" id="eTitle">
    <button onclick="add()">点击添加</button>
<hr>
    <table border="1px">
        <caption>员工表</caption>
        <tr>
            <th>姓名</th>
            <th>工资</th>
            <th>岗位</th>
        </tr>
    </table>
<script>
    function add() {
        // 1.获取用户输入的值
        let eName = document.getElementById('eName').value;
        let eSalary = document.getElementById('eSalary').value;
        let eTitle = document.getElementById('eTitle').value;
        // 8.判断用户输入的信息是否为空 为空则弹出提示信息
        if (eName == '' || eSalary.length == 0 || eTitle==false) {
            alert('请输入完整信息!');
            return;
        }
        // 2.创建表格的tr对象
        let tr = document.createElement('tr');
        // 3.创建当前行的3个td对象[单元格]
        let nameTd = document.createElement('td');
        let salaryTd = document.createElement('td');
        let titleTd = document.createElement('td');
        // 4.给对应的td添加文本信息
        nameTd.innerHTML = eName
        salaryTd.innerHTML = eSalary;
        titleTd.innerHTML = eTitle;
        // 5.将准备好的td装入tr中
        tr.append(nameTd,salaryTd,titleTd);
        // 6.获取table并且将准备好的tr元素添加到table中
        document.querySelector('table').append(tr);
        // 7.用户上传完信息后将文本域中内容清空 以面造成重复添加
        document.getElementById('eName').value='';
        document.getElementById('eSalary').value='';
        document.getElementById('eTitle').value='';

    }
</script>
</body>
</html>